<!--齿轮参考修形设计   zzg-->
<template>
<div class="all">
    <a-row class="all_row">
        <a-col span="12" class="left_col">
            <div class="left">
                <div class="left_top">
                    <div class="left_top_top">参数输入</div>
                    <div class="left_top_middle">
                        <div class="left_top_middle_left">
                            <div class="left_top_middle_left_top">工况参数</div>
                            <div class="left_top_middle_left_bottom">
                                <div class="left_top_middle_left_bottom_left">
                                    <ul class="top_left_text">
                                        <li>齿轮类型</li>
                                        <li>传动类型</li>
                                        <li>使用系数</li>
                                        <li>功率(Kw)</li>
                                        <li>小轮转速(rpm)</li>
                                    </ul>
                                </div>
                                <div class="left_top_middle_left_bottom_right">
                                    <ul class="top_left_input">
                                    <li>
                                    <select v-model="form.sd">
                                        <option value="1">直齿、单斜齿</option>
                                        <option value="0">人字齿</option>
                                    </select>
                                    </li>
                                    <li>
                                    <select v-model="form.t_type">
                                        <option value="0">减速传动</option>
                                        <option value="1">增速传动</option>
                                    </select>
                                    </li>
                                    <li><input v-model="form.KA"/></li>
                                    <li><input v-model="form.P"/></li>
                                    <li><input v-model="form.n1"/></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="left_top_middle_right">
                            <div class="left_top_middle_right_top">齿轮误差参数</div>
                            <div class="left_top_middle_right_bottom">
                                <div class="left_top_middle_right_bottom_left">
                                    <ul class="top_right_text">
                                        <li>小轮齿廓形状偏差(mm)</li>
                                        <li>小轮螺旋线形状偏差(mm)</li>
                                        <li>小轮螺旋线倾斜偏差(mm)</li>
                                        <li>大轮螺旋线倾斜偏差(mm)</li>
                                    </ul>
                                </div>
                                <div class="left_top_middle_right_bottom_right">
                                    <ul class="top_right_input">
                                        <li><input v-model="form.ffa"/></li>
                                        <li><input v-model="form.ffb"/></li>
                                        <li><input v-model="form.fhb1"/></li>
                                        <li><input v-model="form.fhb2"/></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="left_top_bottom">
                        <div class="left_top_bottom_top">几何参数</div>
                        <div class="left_top_bottom_bottom">
                            <div class="left_top_bottom_bottom_left">
                                <ul class="middle_left_text">
                                    <li>小轮齿数</li>
                                    <li>大轮齿数</li>
                                    <li>法向模数(mm)</li>
                                    <li>法向压力角(°)</li>
                                    <li>螺旋角(°)</li>
                                    <li>齿宽(mm)</li>
                                    <li v-show="form.sd==0">人字退刀槽宽(mm)</li>
                                </ul>
                            </div>
                            <div class="left_top_bottom_bottom_middle1">
                                <ul class="middle_left_input">
                                    <li><input v-model="form.z1"/></li>
                                    <li><input v-model="form.z2"/></li>
                                    <li><input v-model="form.mn"/></li>
                                    <li><input v-model="form.alfa"/></li>
                                    <li><input v-model="form.beta"/></li>
                                    <li><input v-model="form.b"/></li>
                                    <li v-show="form.sd==0"><input v-model="form.c"/></li>
                                </ul>
                            </div>
                            <div class="left_top_bottom_bottom_middle2">
                                <ul class="middle_right_text">
                                <li>小轮变位系数</li>
                                <li>大轮变位系数</li>
                                <li>小轮顶圆直径(mm)</li>
                                <li>大轮顶圆直径(mm)</li>
                                <li>中心距(mm)</li>
                                <li>小齿轮轴内径(mm)</li>
                                <li>轴承跨距(mm)</li>
                                </ul>
                            </div>
                            <div class="left_top_bottom_bottom_right">
                                <ul class="middle_right_input">
                                    <li><input v-model="form.x1"/></li>
                                    <li><input v-model="form.x2"/></li>
                                    <li><input v-model="form.da1"/></li>
                                    <li><input v-model="form.da2"/></li>
                                    <li><input v-model="form.aw"/></li>
                                    <li><input v-model="form.di"/></li>
                                    <li><input v-model="form.L"/></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="left_middle">
                    <button class="middle_button" @click="calculation">计算</button>
                </div>
                <div class="left_bottom">
                    <div class="left_bottom_top">输出参数</div>
                    <div class="left_bottom_middle1">
                        <div class="left_bottom_middle1_top">变形参数</div>
                        <div class="left_bottom_middle1_bottom">
                            <div class="left_bottom_middle1_bottom_1">
                                <ul class="bottom_left_text">
                                    <li>轮齿扭转变形</li>
                                    <li>轮齿弯曲变形</li>
                                </ul>
                            </div>
                            <div class="left_bottom_middle1_bottom_2">
                                <ul class="bottom_left_ans">
                                    <li>{{ans.detat}}</li>
                                    <li>{{ans.detab}}</li>
                                </ul>
                            </div>
                            <div class="left_bottom_middle1_bottom_3">
                                <ul class="bottom_right_text">
                                    <li>齿廓变形量</li>
                                    <li>轮齿总变形</li>
                                </ul>
                            </div>
                            <div class="left_bottom_middle1_bottom_4">
                                <ul class="bottom_right_ans">
                                    <li>{{ans.deta_p}}</li>
                                    <li>{{ans.deta}}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="left_bottom_middle2">
                        <div class="left_bottom_middle1_top">齿廓修形参数</div>
                        <div class="left_bottom_middle1_bottom">
                            <div class="left_bottom_middle1_bottom_1">
                                <ul class="bottom_left_text">
                                    <li>长修形长度</li>
                                    <li>短修形长度</li>
                                    <li>长修形起点公差</li>
                                    <li>短修形起点公差</li>
                                </ul>
                            </div>
                            <div class="left_bottom_middle1_bottom_2">
                                <ul class="bottom_left_ans">
                                    <li>{{ans.lt_l}}</li>
                                    <li>{{ans.lt_s}}</li>
                                    <li>{{ans.deta_stl}}</li>
                                    <li>{{ans.deta_sts}}</li>
                                </ul>
                            </div>
                            <div class="left_bottom_middle1_bottom_3">
                                <ul class="bottom_right_text">
                                    <li>齿顶/齿根修形量上限值</li>
                                    <li>齿顶/齿根修形量下限值</li>
                                    <li>渐开线展开长度</li>
                                </ul>
                            </div>
                            <div class="left_bottom_middle1_bottom_4">
                                <ul class="bottom_right_ans">
                                    <li>{{ans.detaamax}}</li>
                                    <li>{{ans.detaamin}}</li>
                                    <li>{{ans.ga}}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="left_bottom_middle3">
                        <div class="left_bottom_middle1_top">sigg齿廓修形参数</div>
                        <div class="left_bottom_middle1_bottom">
                            <div class="left_bottom_middle1_bottom_1">
                                <ul class="bottom_left_text">
                                    <li>齿顶修形量上限值</li>
                                    <li>齿顶修形量下限值</li>
                                </ul>
                            </div>
                            <div class="left_bottom_middle1_bottom_2">
                                <ul class="bottom_left_ans">
                                    <li>{{ans.re_tmax}}</li>
                                    <li>{{ans.re_tmin}}</li>
                                </ul>
                            </div>
                            <div class="left_bottom_middle1_bottom_3">
                                <ul class="bottom_right_text">
                                    <li>齿根修形量上限值</li>
                                    <li>齿根修形量下限值</li>
                                </ul>
                            </div>
                            <div class="left_bottom_middle1_bottom_4">
                                <ul class="bottom_right_ans">
                                    <li>{{ans.re_rmax}}</li>
                                    <li>{{ans.re_rmin}}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="left_bottom_middle4">
                        <div class="left_bottom_middle4_top">齿向修形参数</div>
                        <div class="left_bottom_middle4_bottom">
                            <div class="left_bottom_middle4_bottom_1">
                                <div class="left_bottom_middle1_top">齿端倒坡修形参数</div>
                                <div class="left_bottom_middle1_bottom">
                                    <div class="left_bottom_middle1_bottom_1">
                                        <ul class="bottom_left_text">
                                            <li>端面倒坡长度1</li>
                                            <li>齿端修形量1上限值</li>
                                            <li>齿端修形量2上限值</li>
                                        </ul>
                                    </div>
                                    <div class="left_bottom_middle1_bottom_2">
                                        <ul class="bottom_left_ans">
                                            <li>{{ans.l1}}</li>
                                            <li>{{ans.end_relief1max}}</li>
                                            <li>{{ans.end_relief2max}}</li>
                                        </ul>
                                    </div>
                                    <div class="left_bottom_middle1_bottom_3">
                                        <ul class="bottom_right_text">
                                            <li>端面倒坡长度2</li>
                                            <li>齿端修形量1下限值</li>
                                            <li>齿端修形量2下限值</li>
                                        </ul>
                                    </div>
                                    <div class="left_bottom_middle1_bottom_4">
                                        <ul class="bottom_right_ans">
                                            <li>{{ans.l2}}</li>
                                            <li>{{ans.end_relief1min}}</li>
                                            <li>{{ans.end_relief2min}}</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="left_bottom_middle4_bottom_2">
                                <div class="left_bottom_middle1_top">鼓形修形参数</div>
                                <div class="left_bottom_middle1_bottom">
                                    <div class="left_bottom_middle1_bottom_1">
                                        <ul class="bottom_left_text">
                                            <li>鼓形修形量上限值</li>
                                        </ul>
                                    </div>
                                    <div class="left_bottom_middle1_bottom_2">
                                        <ul class="bottom_left_ans">
                                            <li>{{ans.crown_reliefmax}}</li>
                                        </ul>
                                    </div>
                                    <div class="left_bottom_middle1_bottom_3">
                                        <ul class="bottom_right_text">
                                            <li>鼓形修形量下限值</li>
                                        </ul>
                                    </div>
                                    <div class="left_bottom_middle1_bottom_4">
                                        <ul class="bottom_right_ans">
                                            <li>{{ans.crown_reliefmin}}</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="left_bottom_middle4_bottom_3">
                                <div class="left_bottom_middle1_top">螺旋角修形加鼓形修形参数</div>
                                <div class="left_bottom_middle1_bottom">
                                    <div class="left_bottom_middle1_bottom_1">
                                        <ul class="bottom_left_text">
                                            <li>鼓形修形量上限值</li>
                                            <li>螺旋角修形量</li>
                                        </ul>
                                    </div>
                                    <div class="left_bottom_middle1_bottom_2">
                                        <ul class="bottom_left_ans">
                                            <li>{{ans.crown_max}}</li>
                                            <li>{{ans.deta_helixangle}}</li>
                                        </ul>
                                    </div>
                                    <div class="left_bottom_middle1_bottom_3">
                                        <ul class="bottom_right_text">
                                            <li>鼓形修形量下限值</li>
                                        </ul>
                                    </div>
                                    <div class="left_bottom_middle1_bottom_4">
                                        <ul class="bottom_right_ans">
                                            <li>{{ans.crown_min}}</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a-col>
        <a-col span="12" class="right_col">
            <div class="right">
                <div class="right_top">参考图形</div>
                <div class="right_bottom">
                    <ul class="right_bottom_img">
                        <div style="height: 25%;width: 100%;position: relative">
                        <div v-show="form.sd==0" style="width: 100%; height: 25%; position:absolute">
                        <li><img :src="img.img5" width="100%" height="140px"/>人字齿齿端倒坡修形示意图</li>
                        </div>
                        <div v-show="form.sd==1" style="width: 100%; height: 25%; position: absolute">
                            <li><img :src="img.img1" width="100%" height="140px"/>齿端倒坡修形示意图</li>
                        </div>
                        </div>
                        <li><img :src="img.img2" width="100%" height="130px"/>齿廓修形示意图</li>
                        <li><img :src="img.img3" width="100%" height="120px"/>修鼓示意图</li>
                        <li><img :src="img.img4" width="100%" height="120px"/>螺旋角修形示意图</li>
                    </ul>
                </div>
            </div>
        </a-col>
    </a-row>
</div>
</template>

<script>
    import img1 from "@/assets/image/image_13_1.jpg";
    import img2 from "@/assets/image/image_13_4.jpg";
    import img3 from "@/assets/image/image_13_2.jpg";
    import img4 from "@/assets/image/image_13_3.jpg";
    import img5 from "@/assets/image/image_13_5.jpg";
    import {gear_modification} from "../../../api/file";
    export default {
        name: "gear_design",
        created() {
            document.title='齿轮修形设计计算'
          this.$store.state.file.key=13
        },
        data(){
            return{
              img: {
                  img1,
                  img2,
                  img3,
                  img4,
                  img5
              },
              form:this.$store.state.file.dataList[13],
              ans:{
                  deta_p:"Text",
                  deta:"Text",
                  detab:"Text",
                  detat:"Text",
                  ga:"Text",
                  lt_l:"Text",
                  lt_s:"Text",
                  detaamin:"Text",
                  detaamax:"Text",
                  l1:"Text",
                  l2:"Text",
                  end_relief1min:"Text",
                  end_relief1max:"Text",
                  end_relief2min:"Text",
                  end_relief2max:"Text",
                  crown_reliefmin:"Text",
                  crown_reliefmax:"Text",
                  deta_stl:"Text",
                  deta_sts:"Text",
                  re_tmin:"Text",
                  re_tmax:"Text",
                  re_rmin:"Text",
                  re_rmax:"Text",
                  deta_helixangle:"Text",
                  crown_min:"Text",
                  crown_max:"Text"
              }
            };
        },
        methods:{
            calculation(){
                //这个括号里面可以传参，一般就是传你this.form的内容
                gear_modification(this.form)
                    .then(res => {//这里需要用箭头函数，如果不用箭头函数里面的this就不是外面那个this
                        console.log(res);
                        //你也可以不检验，这个状态码一般是检验后端数据有没有异常，res就是返回结果的整个大的对象
                        this.ans=res;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        }
    }
</script>

<style scoped>
.all
{
    width: 100%;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    color: #333333;
}
.all_row
{
    width: 100%;
    height: 120%;
}
.left_col
{
    height: 100%;
}
.right_col
{
    height: 100%;
}
.left
{
    height: 96%;
    width: 98%;
    margin-left: 2%;
    margin-top: 1%;
}
.left_top
{
    width: 100%;
    height: 40%;
    box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
}
.left_top_top
{
    width: 100%;
    height: 6%;
    background: #D7D7D7;
    font-weight: 600;
    font-size: 18px;
}
.left_top_middle
{
    width: 99%;
    height: 44%;
    position: relative;
}
.left_top_middle_left
{
    height: 96%;
    width: 42%;
    position: absolute;
    left: 1%;
    top:2%;
    padding: 2px;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(121, 121, 121, 1);
    border-radius: 8px;
}
.left_top_middle_right
{
    height: 96%;
    width: 54%;
    position: absolute;
    right: 1%;
    top:2%;
    padding: 2px;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(121, 121, 121, 1);
    border-radius: 8px;
}
.left_top_middle_left_top
{
    height: 13%;
    width: 100%;
    color: #333333;
    font-weight: 600;
}
.left_top_middle_left_bottom
{
    width: 100%;
    height: 87%;
    position: relative;
}
.left_top_middle_left_bottom_left
{
    width: 40%;
    height: 100%;
    position: absolute;
    left: 0;
}
.top_left_text
{
    text-align: right;
    margin-top: 2%;
  width: 100%;
  height: 100%;
}
.top_left_text li
{
    height: 20%;
}
.left_top_middle_left_bottom_right
{
    width: 60%;
    height: 100%;
    position: absolute;
    right: 0;
}
.left_top_middle_right_top
{
    height: 13%;
    width: 100%;
    color: #333333;
    font-weight: 600;
}
.left_top_middle_right_bottom
{
    width: 100%;
    height: 87%;
    position: relative;
}
.left_top_middle_right_bottom_left
{
    padding-top: 2%;
    padding-right: 2%;
    width: 55%;
    height: 100%;
    position: absolute;
    left: 0;
}
.top_right_text
{
    text-align: right;
    margin-top: 5%;
  width: 100%;
  height: 100%;
}
.top_right_text li
{
    height: 20%;
}
.left_top_middle_right_bottom_right
{
    padding-top: 2%;
    width: 45%;
    height: 100%;
    position: absolute;
    right: 0;
}
.top_right_input
{
    width: 100%;
    height: 100%;
    margin-left: 5%;
}
.top_right_input li
{
    width: 100%;
    height: 18%;
    margin-top: 2%;
}
.top_right_input input
{
    width: 65%;
    height: 100%;
}
.top_left_input
{
    width: 100%;
    height: 100%;
    margin-left: 10%;
}
.top_left_input li
{
    width: 100%;
    height: 18%;
    margin-top: 1%;
}
.top_left_input input
{
    width: 50%;
    height: 100%;
}
.top_left_input select
{
    width: 70%;
    height: 100%;
}
.left_top_bottom
{
    width: 97%;
    height: 49%;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(121, 121, 121, 1);
    border-radius: 8px;
    padding: 2px;
    margin-left: 1%;
}
.left_top_bottom_top
{
    height: 10%;
    width: 100%;
    color: #333333;
    font-weight: 600;

}
.left_top_bottom_bottom
{
    height: 90%;
    width: 100%;
    position: relative;
}
.left_top_bottom_bottom_left
{
    width: 25%;
    height: 100%;
    position: absolute;
    left: 0;
}
.middle_left_text
{
    margin-top: -2%;
    margin-right: 5%;
    text-align: right;
    width: 100%;
    height: 100%;
}
.middle_left_text li
{
    height: 14%;
}
.left_top_bottom_bottom_middle1
{
    width: 25%;
    height: 100%;
    position: absolute;
    left: 25%;
}
.middle_left_input
{
    margin-top: -1%;
    width: 100%;
    height: 100%;
    margin-left: 5%;
}
.middle_left_input li
{
    width: 100%;
    height: 14%;
}
.middle_left_input input
{
    width: 50%;
    height: 95%;
}
.left_top_bottom_bottom_middle2
{
    width: 25%;
    height: 100%;
    position: absolute;
    left: 50%;
}
.middle_right_text
{
    width: 100%;
    height: 100%;
    margin-top: -2%;
    margin-right: 5%;
    text-align: right;
}
.middle_right_text li
{
    margin-top: -1.5%;
   height: 16%;
}
.left_top_bottom_bottom_right
{
    width: 25%;
    height: 100%;
    position: absolute;
    right: 0;
}
.middle_right_input
{
    margin-top: -2%;
    width: 100%;
    height: 100%;
    margin-left: 5%;
}
.middle_right_input li
{
    width: 100%;
    height: 14%;
}
.middle_right_input input
{
    width: 50%;
    height: 95%;
}
.left_middle
{
    width: 100%;
    height: 3%;
    text-align: right;
}
.middle_button
{
    width: 15%;
    height: 90%;
    margin-top: 0.2%;
}
.left_bottom
{
    width: 100%;
    height: 60%;
    box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
}
.left_bottom_top
{
    width: 100%;
    height: 5%;
    background: #D7D7D7;
    font-weight: 600;
    font-size: 18px;
}
.left_bottom_middle1
{
    width: 97%;
    height: 13%;
    padding: 2px;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(121, 121, 121, 1);
    border-radius: 8px;
    margin-top: 2px;
    margin-left: 1%;
}
.left_bottom_middle1_top
{
    width: 100%;
    height: 15%;
    margin-top: -3px;
    font-weight: 600;
}
.left_bottom_middle1_bottom
{
    width: 100%;
    height: 80%;
    margin-top: 5px;
    position: relative;
}
.left_bottom_middle1_bottom_1
{
    width: 25%;
    height: 100%;
    position: absolute;
    left: 0;
}
.left_bottom_middle1_bottom_2
{
    width: 25%;
    height: 100%;
    position: absolute;
    left: 25%;
}
.left_bottom_middle1_bottom_3
{
    width: 30%;
    height: 100%;
    position: absolute;
    left: 50%;
}
.left_bottom_middle1_bottom_4
{
    width: 20%;
    height: 100%;
    position: absolute;
    right: 0;
}
.bottom_left_text
{
    height: 100%;
    width: 100%;
    text-align: right;
    margin-top: 3%;
}
.bottom_left_text li
{
    margin-top: -1%;
}
.bottom_left_ans
{
    height: 100%;
    width: 100%;
    margin-top: 2%;
    margin-left: 25%;
}
.bottom_left_ans li
{
    margin-top: -1%;
}
.bottom_right_text
{
    height: 100%;
    width: 100%;
    text-align: right;
    margin-top: 2%;
}
.bottom_right_text li
{
    margin-top: -1%;
}
.bottom_right_ans
{
    height: 100%;
    width: 100%;
    margin-top: 2%;
    margin-left: 25%;
}
.bottom_right_ans li
{
    margin-top: -1%;
}
.left_bottom_middle2
{
    width: 97%;
    height: 23%;
    padding: 2px;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(121, 121, 121, 1);
    border-radius: 8px;
    margin-top: 2px;
    margin-left: 1%;
}
.left_bottom_middle3
{
    width: 97%;
    height: 13%;
    padding: 2px;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(121, 121, 121, 1);
    border-radius: 8px;
    margin-top: 2px;
    margin-left: 1%;
}
.left_bottom_middle4
{
    width: 97%;
    height: 43%;
    padding: 2px;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(121, 121, 121, 1);
    border-radius: 8px;
    margin-top: 2px;
    margin-left: 1%;
}
.left_bottom_middle4_top
{
    width: 100%;
    height: 5%;
    margin-top: -1%;
    font-weight: 600;
}
.left_bottom_middle4_bottom
{
    width: 100%;
    height: 95%;
}
.left_bottom_middle4_bottom_1
{
    width: 100%;
    height: 50%;
    margin-top: 1%;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(121, 121, 121, 1);
    border-radius: 8px;
}
.left_bottom_middle4_bottom_2
{
    width: 100%;
    height: 18%;
    margin-top: 0.2%;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(121, 121, 121, 1);
    border-radius: 8px;
}
.left_bottom_middle4_bottom_3
{
    width: 100%;
    height: 30%;
    margin-top: 0.2%;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(121, 121, 121, 1);
    border-radius: 8px;
}
.right
{
    height: 97%;
    width: 90%;
    margin-top: 1%;
    margin-left: 6%;
    box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
}
.right_top
{
    width: 100%;
    height: 2.5%;
    background: #D7D7D7;
}
.right_bottom
{
    width: 100%;
    height: 97.5%;
}
.right_bottom_img
{
    width: 100%;
    height: 100%;
    text-align: center;
    margin-left:10%;
}
.right_bottom_img li
{
    width: 80%;
    height: 25%;
    margin-top: 1%;
}

</style>